<template>
  <view :style="colorStyle">
    <navTitle :title="'我加入的店铺（' + list.length + '）'" />
    <view class="bg">
      <view class="block1"> </view>
      <image
        src="http://xpj40szpt.signalpha.cn/img/img22.png"
        mode="widthFix"
      ></image>
    </view>

    <view class="infobox1 flex aitems">
      <image :src="info.avatar" class="block1" mode="aspectFill"></image>
      <view class="block2">
        <view class="info flex aitems cfff">
          <view class="info1 f32">
            {{ info.nickName }}
          </view>
          <view class="info2 f20 themeColor">
            {{ level[info.level] }}
          </view>
        </view>
        <view class="ids cfff f24"> ID： {{ info.id }} </view>
      </view>
    </view>

    <view class="infobox2">
      <nodata v-if="list.length == 0" />
      <view v-if="list.length == 0" class="" style="height: 100rpx"> </view>
      <view class="list flex" v-for="(item, index, key) in list" :key="key">
        <image :src="item.sellerLogo" mode="aspectFill" class="headimg"></image>
        <view class="block1">
          <view class="info1 flex aitems between">
            <view class="tipbox1">
              <view class="tip1 c1F1F1F f32 fontWeight">
                {{ item.sellerName }}
              </view>
              <view class="stars flex">
                <image
                  v-for="(items, indexs, keys) in item.sellerScore"
                  :key="keys"
                  src="@/static/img7.png"
                  mode=""
                >
                </image>
              </view>
            </view>
            <view class="tipbox2 flex aitems" @click="getRule(item)">
              <view class="tip1 f24 c858585"> 分销规则 </view>
              <image src="@/static/img18.png" class="tip2" mode=""></image>
            </view>
          </view>
          <view class="info2 flex aitems between">
            <view class="tipbox1">
              <view class="tip1 c1F1F1F f40 fontWeight">
                {{ item.orderNum }}
              </view>
              <view class="tip2 c525252 f28"> 推广订单 </view>
            </view>

            <view class="tipbox1">
              <view class="tip1 c1F1F1F f40 fontWeight">
                {{ item.orderAmount }}
              </view>
              <view class="tip2 c525252 f28"> 推广佣金 </view>
            </view>

            <view class="tipbox1">
              <view class="tip1 c1F1F1F f40 fontWeight"> </view>
              <view class="tip2 c525252 f28"> </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="" style="height: 100rpx"> </view>
  </view>
</template>

<script>
import {
  placeSellerList,
  userinfo,
  levelList,
  placeSellerRule,
} from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { loading, go } from "@/utils/wxAPI";
import colors from "@/mixins/color";
import { getToken, setStorage } from "../../utils/storage";
export default {
  mixins: [colors],
  data() {
    return {
      list: [],
      info: {},
      level: {},
    };
  },
  async onLoad(options) {
    if (getToken()) {
      this.placeSellerList();
    }
  },
  async onShow() {
    if (getToken()) {
      await this.levelList();
      this.userinfo();
    }
  },
  methods: {
    async levelList() {
      loading();
      let { data } = await levelList();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data;
        let obj = {};
        for (let key of list) {
          obj[key.id] = key.name;
        }
        this.level = obj;
        console.log(this.level);
      }
      uni.hideLoading();
    },
    async userinfo() {
      loading();
      let { data } = await userinfo();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let info = data.data;
        this.info = info;
      }
      uni.hideLoading();
    },
    async placeSellerList() {
      loading();
      let { data } = await placeSellerList();
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data;
        this.list = list;
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },
    gourl(url) {
      go(url);
    },
    async getRule(item) {
      loading();
      let { data } = await placeSellerRule({
        sellerId: item.sellerId,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        setStorage("rule", data.data);
        go(`/pages/user/xieyi?title=分销规则`);
      }
    },
  },
  onReachBottom() {},
  onPullDownRefresh() {
    this.placeSellerList();
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.bg {
  width: 100%;
  height: 750rpx;
  background: linear-gradient(
    180deg,
    var(--view-theme) 74.53%,
    rgba(92, 206, 221, 0) 100%
  );
  position: absolute;
  top: 0;

  .block1 {
    background: linear-gradient(
      180deg,
      var(--view-theme) 0%,
      var(--view-theme) 100%
    );
  }

  image {
    width: 100%;
  }
}

.infobox1 {
  position: relative;
  z-index: 1;
  margin: 50rpx 30rpx 0;

  .block1 {
    width: 96rpx;
    height: 96rpx;
    border-radius: 96rpx;
  }

  .block2 {
    margin-left: 24rpx;
    width: calc(100% - 24rpx - 96rpx);

    .info {
      .info1 {
      }

      .info2 {
        margin-left: 16rpx;
        border-radius: 20rpx;
        background: #fff;
        padding: 4rpx 18rpx;
      }
    }

    .ids {
      margin-top: 8rpx;
    }
  }
}

.infobox2 {
  border-radius: 28rpx;
  background: #fff;
  margin: 30rpx 30rpx 0;
  padding: 36rpx 0 0;
  position: relative;
  z-index: 1;

  .list {
    padding: 0 28rpx;
    margin: 0 0 36rpx 0;

    .headimg {
      width: 85rpx;
      height: 85rpx;
      border-radius: 57rpx;
    }

    .block1 {
      border-bottom: 1px solid #f5f5f5;
      padding: 0 0 36rpx 0;
      margin-left: 24rpx;
      width: calc(100% - 24rpx - 85rpx);

      .info1 {
        .tipbox1 {
          .tip1 {
          }

          .stars {
            margin: 8rpx 0 0;

            image {
              width: 32rpx;
              height: 32rpx;
              margin: 0 8rpx 0 0;
            }
          }
        }

        .tipbox2 {
          .tip1 {
          }

          .tip2 {
            margin-left: 8rpx;
            width: 32rpx;
            height: 32rpx;
          }
        }
      }

      .info2 {
        margin: 36rpx 0 0;

        .tipbox1 {
          text-align: center;

          .tip1 {
          }

          .tip2 {
            margin-top: 8rpx;
          }
        }
      }
    }
  }
}

.infobox3 {
  border-radius: 28rpx;
  background: #fff;
  margin: 30rpx 30rpx 0;
  padding: 20rpx 24rpx;
  position: relative;
  z-index: 1;

  .block1 {
    padding: 20rpx 0;

    .info1 {
      image {
        width: 56rpx;
        height: 56rpx;
      }

      .tip1 {
        margin-left: 24rpx;
      }
    }
  }

  .block2 {
    width: 32rpx;
    height: 32rpx;
  }
}
</style>
